<template>
	<div>
		<van-popup
		  v-model="active"
		  closeable
		  position="bottom"
		  :style="{ width:'95%',height: '85%',margin:'0 0.2666rem' }"
		  round
		>
		<div style="width: 100%;padding-bottom: 2.8666rem;">
			<van-image
			  height="200"
			   fit="cover"
			  :src="specsdata.url"
			/>
			<div class="tea_content">
				<div class="title">
					<h2 style="font-size: 20px;">{{specsdata.title}}</h2>
					<p style="margin-top: 5px;font-size: 14px;color: #ccc;">{{specsdata.text}}</p>
				</div>
				<div class="spec_menu">
					<div>规格（*必选）</div>
					<ul>
						<li style="background-color: #FF5809;color: white;">中杯</li>
						<li>大杯</li>
					</ul>
				</div>
				<div class="spec_menu">
					<div>加料</div>
					<ul>
						<li style="background-color: #FF5809;color: white;">椰果</li>
						<li>布丁</li>
						<li>红豆</li>
					</ul>
				</div>
				<div class="spec_menu">
					<div>温度（*必选）</div>
					<ul>
						<li >去冰</li>
						<li>少冰</li>
						<li style="background-color: #FF5809;color: white;">正常冰</li>
						<li>多冰</li>
					</ul>
				</div>
				<div class="spec_menu">
					<div>糖度（*必选）</div>
					<ul>
						<li>七分糖</li>
						<li style="background-color: #FF5809;color: white;">十分糖</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="addcart">
			<div class="selected">
				已选规格：中杯，椰果，正常冰，十分糖
			</div>
			<div class="price">
				<p>￥{{specsdata.price}}</p>
				<van-stepper v-model="value" theme="round" button-size="22" disable-input />
				<van-button type="warning" round="">加入购物车</van-button>
			</div>
		</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		name: '',
		data(){
			return{
				active: false,
				value: 1
			}
		},
		components:{
			
		},
		props:{
			specsdata: Object
		},
		methods:{
			qf(){ //取反
				return this.active = !this.active
			}
		}
	}
</script>

<style scoped="scoped">
	.tea_content{
		width: 100%;
		height: calc(100% - 150px);
		padding: 0.5333rem;
		
	}
	.spec_menu{
		width: 100%;
		line-height: 0.8rem;
		height: 1.5rem;
		margin-top: 0.5666rem;
		font-size: 0.3666rem;
	}
	.spec_menu ul{
		display: flex;
		width: 100%;
		height: 0.4rem;
	}
	.spec_menu ul li{
		width: 20%;
		height: 0.6rem;
		line-height: 0.6rem;
		background-color: #F5F5F5;
		color: #696969;
		margin-right: 0.3333rem;
		border-radius: 0.1066rem;
		text-align: center;
	}
	.addcart{
		width: 95%;
		height: 3rem;
		position: fixed;
		bottom: 0;
		background-color: white;
	}
	.selected{
		width: 100%;
		height: 0.6666rem;
		line-height: 0.6666rem;
		font-size: 0.36rem;
		background-color: #F5F5F5;
		color: #a9a9a9;
	}
	.price{
		width: 100%;
		height: 0.6666rem;
		line-height: 0.6666rem;
		padding: 0.2666rem;
		float: left;
	}
	.price p{
		float: left;
		font-size: 0.46rem;
		color: #ff8c00;
		width: 1.3333rem;
		text-align: center;
	}
	.price .van-stepper{
		float: right;
		width: 2.6666rem;
		text-align: center;
	}
	.van-button{
		width: 100%;
		margin-top: 0.2rem;
		background-color: #FF5809;
	}
</style>
